<template>
  <div>
    <div
      style="
        background-color: rgb(239, 239, 244);
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div style="display: flex">
        <div>
          <img
            src="../../assets/img/client.png"
            alt=""
            style="
              width: 40px;
              height: 40px;
              margin-top: 5px;
              margin-left: 10px;
            "
          />
        </div>
        <div style="font-size: 24px; margin-left: 10px; margin-top: 8px">
          商机管理
        </div>
      </div>
      <div style="display: flex">
        <div>
          <el-button type="primary">资料支持</el-button>
        </div>
        <div style="margin-left: 20px">
          <el-button type="primary">销售支持</el-button>
        </div>
        <div style="margin-left: 20px">
          <el-button type="primary">新建</el-button>
        </div>
        <div>
          <el-dropdown split-button type="primary" style="margin-left: 20px">
            联系提醒(1)
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>联系提醒(1)</el-dropdown-item>
              <el-dropdown-item>客户交流提醒</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div>
          <img
            src="../../assets/img/sq.png"
            alt=""
            style="
              background-color: rgb(200, 200, 200);
              margin-top: 4px;
              margin-left: 20px;
              margin-right: 10px;
            "
          />
        </div>
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-tabs v-model="activeName" @tab-click="tagClick">
        <el-tab-pane label="我的商机" name="first">
          <div style="display: flex">
            <el-dropdown
              split-button
              type="primary"
              size="mini"
              style="margin-left: 20px"
              >标签</el-dropdown
            >
            <el-dropdown
              split-button
              type="primary"
              size="mini"
              style="margin-left: 20px"
            >
              张帅扬/演示账号
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>张帅扬/演示账号</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              size="mini"
              style="margin-left: 20px"
            >
              仅本人
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>仅本人</el-dropdown-item>
                <el-dropdown-item>含下属</el-dropdown-item>
                <el-dropdown-item>仅下属</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              size="mini"
              style="margin-left: 20px"
            >
              联系情况
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>三天未联系</el-dropdown-item>
                <el-dropdown-item>一周未联系</el-dropdown-item>
                <el-dropdown-item>两周未联系</el-dropdown-item>
                <el-dropdown-item>一月未联系</el-dropdown-item>
                <el-dropdown-item>三月未联系</el-dropdown-item>
                <el-dropdown-item>半年未联系</el-dropdown-item>
                <el-dropdown-item>一年未联系</el-dropdown-item>
                <el-dropdown-item>无联系记录</el-dropdown-item>
                <el-dropdown-item>今天联系</el-dropdown-item>
                <el-dropdown-item>近一周联系</el-dropdown-item>
                <el-dropdown-item>近一月联系</el-dropdown-item>
                <el-dropdown-item>近三月联系</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              size="mini"
              style="margin-left: 20px"
            >
              销售预期
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>今天</el-dropdown-item>
                <el-dropdown-item>本周</el-dropdown-item>
                <el-dropdown-item>本月</el-dropdown-item>
                <el-dropdown-item>上个月</el-dropdown-item>
                <el-dropdown-item>本季</el-dropdown-item>
                <el-dropdown-item>本年</el-dropdown-item>
                <el-dropdown-item>上一年</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              size="mini"
              style="margin-left: 20px"
            >
              预期收益
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>0-5万</el-dropdown-item>
                <el-dropdown-item>5-10万</el-dropdown-item>
                <el-dropdown-item>10-20万</el-dropdown-item>
                <el-dropdown-item>20-50万</el-dropdown-item>
                <el-dropdown-item>50-100万</el-dropdown-item>
                <el-dropdown-item>100万+</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown
              split-button
              type="primary"
              size="mini"
              style="margin-left: 20px"
            >
              商机状态
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>未分配</el-dropdown-item>
                <el-dropdown-item>已分配</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div
            style="display: flex; margin-top: 10px; flex-direction: row-reverse"
          >
            <div>
              <el-input
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="input"
                size="mini"
              >
              </el-input>
            </div>
            <div>
              <el-button size="mini">高级搜索</el-button>
            </div>
          </div>
          <div style="margin-top: 10px">
            <el-table :data="businessData" style="width: 100%">
              <el-table-column prop="attention" label="关注"
                ><el-rate v-model="value"></el-rate>
              </el-table-column>
              <el-table-column
                prop="businessTitle"
                label="商机名称"
                width="250"
              >
              </el-table-column>
              <el-table-column prop="contactInformation" label="联系情况">
              </el-table-column>
              <el-table-column prop="customerName" label="客户名称">
              </el-table-column>
              <el-table-column prop="principal" label="负责人">
              </el-table-column>
              <el-table-column prop="prospectiveEarnings" label="预期收益">
              </el-table-column>
              <el-table-column prop="projectRequirements" label="项目关键需求">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getBusinessManagement } from "../../api/sales";
export default {
  mounted() {
    this.getBusinessManagement();
  },
  data() {
    return {
      value: null,
      activeName: "first",
      businessData: [],
      attentionList: [
        {
          name1: "上海亘岩集团客户购买商机",
          contact: "无记录 | 1136",
          name2: "上海亘岩网络科技有限公司",
          people: "张帅扬/演示账号",
          income: "2000000",
          demand: "合同管理模块",
        },
      ],
      allList: [
        {
          name1: "上海亘岩集团客户购买商机",
          contact: "无记录 | 394",
          name2: "上海亘岩网络科技有限公司",
          people: "张帅扬/演示账号",
          income: "500000",
          demand: "",
        },
        {
          name1: "上海亘岩集团采购意向",
          contact: "无记录 | 394",
          name2: "上海亘岩网络科技有限公司",
          people: "张帅扬/演示账号",
          income: "200000",
          demand: "",
        },
        {
          name1: "上海亘岩网络科技有限公司采购意向",
          contact: "无记录 | 394",
          name2: "上海亘岩网络科技有限公司",
          people: "张帅扬/演示账号",
          income: "1000000",
          demand: "",
        },
        {
          name1: "CRM项目",
          contact: "551 | 555",
          name2: "蚂蚁科技",
          people: "赵泽煜",
          income: "1000000",
          demand: "",
        },
        {
          name1: "世尊CRM采购",
          contact: "无记录 | 635",
          name2: "佳世达科技有限公司",
          people: "张帅扬/演示账号",
          income: "200000",
          demand: "",
        },
        {
          name1: "年度维护",
          contact: "无记录 | 645",
          name2: "重庆旭辉股份有限公司",
          people: "赵泽煜",
          income: "100000",
          demand: "",
        },
        {
          name1: "新意人事管理",
          contact: "无记录 | 779",
          name2: "上海新意软件",
          people: "张帅扬/演示账号",
          income: "0.00",
          demand: "",
        },
        {
          name1: "金科年度景观施工一期项目",
          contact: "无记录 | 841",
          name2: "重庆金科股份有限公司",
          people: "张帅扬/演示账号",
          income: "10000000",
          demand: "",
        },
        {
          name1: "龙湖地产建筑一期项目",
          contact: "无记录 | 841",
          name2: "重庆龙湖星耀集团",
          people: "张帅扬/演示账号",
          income: "0.00",
          demand: "",
        },
        {
          name1: "上海亘岩网络科技有限公司客户购买商机",
          contact: "无记录 | 1125",
          name2: "上海亘岩网络科技有限公司",
          people: "任贯逞",
          income: "1000000",
          demand: "合同管理模块",
        },
      ],
    };
  },
  methods: {
    getBusinessManagement() {
      getBusinessManagement().then((res) => {
        console.log(res);
        this.businessData = res.result;
      });
    },
  },
};
</script>

<style>
</style>